<template>
  <div class>
    <nly-container :fluid="true">
      <nly-breadcrumb>
        <nly-breadcrumb-item
          icon="nlyfont nly-icon-home-fill"
          to="/"
          text="首页"
        />
        <nly-breadcrumb-item
          icon="nlyfont nly-icon-outlet"
          to="/food"
          active
          text="优惠券设置管理"
        />
      </nly-breadcrumb>
      <Modal
          :title="'添加优惠券码'"
          :styles="{ width: '50%' }"
          v-model="modalAddDiscountCode"
          class-name="vertical-center-modal"
          :footer-hide="true"
          @on-cancel="cancel"
      >
        <div>
          <Form ref="codeText" :model="codeText" :label-width="130">
            <FormItem label="优惠券码数量" prop="count">
              <Input
                  v-model="codeText.count"
                  placeholder="请输入优惠券码数量"
              />
            </FormItem>

            <FormItem>
              <Button type="primary" @click="addCodeText()">提交</Button>
              <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </div>
      </Modal>
      <Modal
        :title="update ? '修改优惠券信息' : '添加优惠券'"
        :styles="{ width: '50%' }"
        v-model="modalAddText"
        class-name="vertical-center-modal"
        :footer-hide="true"
        @on-cancel="cancel"
      >
        <div>
          <Form ref="dataText" :model="dataText" :label-width="130">
            <FormItem label="优惠券类型" prop="type">
              <Select
                v-model="dataText.type"
                style="width: 200px"
                placeholder="请选择优惠卷类型"
              >
                <Option :value="1">满减优惠券</Option>
                <Option :value="2">折扣优惠券</Option>
                <Option :value="3">无门槛优惠券</Option>
                <Option :value="4">直抽优惠卷</Option>
                <Option :value="5">签到优惠券</Option>
              </Select>
            </FormItem>
            <FormItem label="优惠券使用场景" prop="state">
              <Select
                v-model="dataText.state"
                style="width: 200px"
                placeholder="请选择优惠卷使用场景"
              >
                <Option :value="0">全场通用</Option>
                <Option :value="1">直买</Option>
                <Option :value="2">抽奖</Option>
              </Select>
            </FormItem>
            <FormItem label="优惠券名称" prop="name">
              <Input v-model="dataText.name" placeholder="请输入优惠券名称" />
            </FormItem>
            <FormItem label="优惠券满减" prop="meet" v-if="dataText.type == 1">
              <Input v-model="dataText.meet" placeholder="请输入优惠券满减" />
            </FormItem>
            <FormItem
              label="优惠金额"
              prop="subtract"
              v-if="dataText.type == 1 || dataText.type == 3"
            >
              <Input v-model="dataText.subtract" placeholder="请输入优惠金额" />
            </FormItem>
            <FormItem label="折扣数" prop="discount" v-if="dataText.type == 2">
              <Input
                v-model="dataText.discount"
                placeholder="请输入折扣数(请输入小数)"
              />
            </FormItem>
            <FormItem
              label="最多优惠金额"
              prop="price"
              v-if="dataText.type == 2"
            >
              <Input
                v-model="dataText.price"
                placeholder="请输入最多优惠金额"
              />
            </FormItem>
            <FormItem
              label="直抽上线金额"
              prop="maximum"
              v-if="dataText.type == 4"
            >
              <Input
                v-model="dataText.maximum"
                placeholder="请输入直抽上线金额"
              />
            </FormItem>
            <FormItem label="有效期(月)" prop="outTime">
              <Input
                v-model="dataText.outTime"
                placeholder="请输入有效期(月)"
              />
            </FormItem>

            <FormItem>
              <Button type="primary" @click="AddText('dataText')">提交</Button>
              <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
            </FormItem>
          </Form>
        </div>
      </Modal>

      <section class="content">
        <row>
          <RadioGroup
            v-model="data.type"
            @on-change="changeType"
            style="float: left; margin-left: 20px"
          >
            <Radio :label="1" border>满减优惠卷</Radio>
            <Radio :label="2" border>折扣优惠券</Radio>
            <Radio :label="3" border>无门槛优惠卷</Radio>
            <Radio :label="4" border>直抽优惠券</Radio>
            <Radio :label="5" border>签到优惠券</Radio>
          </RadioGroup>
          <i-button
            type="primary"
            style="margin-left: 16px"
            @click="addShow"
            icon="md-add"
            >添加优惠卷</i-button
          >
        </row>
        <br />
        <Table
          border
          :columns="header"
          :data="accountList"
          @on-selection-change="enterall"
          ref="selection"
        >
         <template slot-scope="{ row }" slot="state">{{
              row.state == 0 ? "全场通用" : row.state == 1 ? "直买" : "抽奖可用"
            }}</template>
          <template slot-scope="{ row }" slot="action">
            <Button
                style="margin-right: 10px"
                type="primary"
                size="small"
                @click="addCodeModal(row.id)"
            >生成优惠券码</Button
            >
            <Button
                style="margin-right: 10px"
                type="primary"
                size="small"
                @click="listDiscountCode(row.id)"
            >查看优惠券码</Button
            >
            <Button
              style="margin-right: 10px"
              type="primary"
              size="small"
              @click="changeText(row.id, row)"
              >修改</Button
            >
            <Button
              style="margin-right: 10px"
              type="error"
              size="small"
              @click="remove(row.id)"
              >删除</Button
            >
          </template>
        </Table>
        <br />
        <div class="page">
          <Page
            :total="total"
            show-elevator
            show-total
            :page-size="data.pageSize"
            :current="data.page"
            @on-change="changePage"
          />
        </div>
      </section>
    </nly-container>
  </div>
</template>
<script>
import apis from "@/api/shop1";
export default {
  components: {},
  data() {
    return {
      modalAddText: false,
      modalAddDiscountCode: false,
      update: false,
      searchText: "",
      total: 0, 

      data: {
        page: 1, 
        pageSize: 10, 
        type: 1,
      },
      header: [
        {
          title: "优惠券名称",
          key: "name",
          align: "center",
        },
        {
          title: "优惠券使用场景",
          slot: "state",
          align: "center",
        },

        {
          title: "优惠券满减金额",
          key: "meet",
          align: "center",
        },
        {
          title: "优惠金额",
          key: "subtract",
          align: "center",
        },
        {
          title: "折扣数",
          key: "discount",
          align: "center",
        },
        {
          title: "最多优惠金额",
          key: "price",
          align: "center",
        },
        {
          title: "直抽上线金额",
          key: "maximum",
          align: "center",
        },

        {
          title: "有效期(月)",
          key: "outTime",
          align: "center",
        },

        {
          title: "操作",
          slot: "action",
          width: 400,
          fixed: "right",
          align: "center",
        },
      ],
      accountList: [],
      count_scale: [],
      pageNow: 1,
      selectclass: [],
      dataText: {
        name: "",
        meet: "",
        subtract: "",
        outTime: "",
        price: "",
        discount: "",
        maximum: "",
        state: "",
      },
      codeText: {
        discountId: "",
        count: "",
      },

      key: "",
      id: "",
    };
  },
  mounted() {
    let that = this;
    that.getcupponlist();
  },
  methods: {

    listDiscountCode(id) {
      this.$router.push({
        path: "/shop/cupponCode",
        query: {
          id: id,
        },
      });
    },
    addCodeModal(id) {
      this.codeText.discountId = id
      this.modalAddDiscountCode = true
    },
    addCodeText() {
      apis.saveDiscountCode(this.codeText)
      .then((response) => {
        if (response.data.code === 0) {
          this.$Message.success("添加优惠券码成功!")
          this.modalAddDiscountCode = false
        }else {
          this.$Message.error("添加失败!")
        }
      }).catch((error) => {
        console.log(error)
        this.modalAddDiscountCode = false
        this.$Message.error("添加失败")
      })
    },
    changeType(val) {
      this.data.page = 1;
      this.data.type = val;
      console.log(this.data2);
      this.getcupponlist();
    },
    addaccount(id) {
      this.$router.push({
        path: "/addaccoundq",
        query: {
          id: id,
        },
      });
    },
    addShow() {
      this.modalAddText = true;
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    remove(id) {
      let dc_id = "";
      if (id) {
        dc_id = id;
      } else {
        this.enteralldata.map((itme) => {
          if (dc_id == "") {
            dc_id = itme.dc_id;
          } else {
            dc_id += "," + itme.dc_id;
          }
        });
      }
      apis
        .deletecuppon({ id: dc_id })
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            this.$Message.success("删除成功");
            this.getcupponlist();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    },
    getcupponlist() {
      let that = this;
      apis.getcupponlist(this.data).then((response) => {
        let resdata = response.data;
        if (resdata.code == 0) {
          console.log(response.data);
          that.accountList = resdata.data.list;
           that.total = resdata.data.total;
        }
      });
    },
    changePage(page) {
      this.data.page = page;
      this.getcupponlist();
    },
    search_account(val) {
      this.data.page = 1;
      let data = this.data;
      data.name = val;
      this.getcupponlist();
    },
    ModalClose() {
      this.modalAddText = false;
      this.update = false;
      this.modalAddDiscountCode = false;
    },
    changeText(id, data) {
      console.log("打开模态框");
      this.update = true;
      this.dataText.name = data.name;
      this.dataText.meet = data.meet;
      this.dataText.subtract = data.subtract;
      this.dataText.outTime = data.outTime;
      this.dataText.discount = data.discount;
      this.dataText.price = data.price;
      this.dataText.type = data.type;
      this.dataText.state = data.state;
      this.dataText.maximum = data.maximum;
      this.modalAddText = true;
      this.id = id;
      console.log(this.id);
    },
    AddText(name) {
      console.log(name);
      console.log(this.update);
      var that = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.update) {
            this.dataText.id = this.id;
            apis
              .updatecuppon({
                id: this.dataText.id,
                name: this.dataText.name,
                outTime: this.dataText.outTime,
                meet: this.dataText.meet,
                discount: this.dataText.discount,
                price: this.dataText.price,
                type: this.dataText.type,
                state: this.dataText.state,
                maximum: this.dataText.maximum,
              })
              .then((response) => {
                if (response.data.code == 0) {
                  this.$Message.success("修改成功");
                  that.getcupponlist();
                  this.modalAddText = false;
                  this.update = false;
                  this.dataText.subtract = "";
                  this.$refs.dataText.resetFields();
                } else {
                  this.$Message.error("修改失败");
                }
              });
          } else {
            apis
              .addcuppon({
                name: this.dataText.name,
                outTime: this.dataText.outTime,
                meet: this.dataText.meet,
                subtract: this.dataText.subtract,
                discount: this.dataText.discount,
                price: this.dataText.price,
                type: this.dataText.type,
                state: this.dataText.state,
                maximum: this.dataText.maximum,
              })
              .then((response) => {
                this.loading = false;
                let resdata = response.data;
                if (resdata.code == 0) {
                  this.$refs.dataText.resetFields();
                  this.modalAddText = false;
                  this.update = false;
                  this.dataText.subtract = "";
                  this.$Message.success("添加成功");
                  that.getcupponlist();
                } else if (resdata.code == 201) {
                  this.$Message.success("账号重复添加");
                }
              });
          }
        }
      });
    },
    cancel() {
      this.$refs.dataText.resetFields();
      this.dataText.name = "";
      this.dataText.maximum = "";
      this.dataText.meet = "";
      this.dataText.subtract = "";
      this.dataText.discount = "";
      this.dataText.outTime = "";
      this.dataText.price = "";
      this.dataText.state = "";
      this.dataText.type = "";
      this.modalAddText = false;
      this.update = false;
    },
  },
};
</script>

<style scoped>
.padding20 {
  margin: 20px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.ivu-modal-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.page {
  text-align: center;
}
</style>